<template>
	<div class="web-team">
		<el-container>
		  <el-main>
			  <header class="web-team-header">
				  <div class="web-team-header-left">
					<el-avatar  ref="personalvRef" @click="onClickPersonal" :size="40" :src="store.state.userInfoX?.avatar?store.state.userInfoX?.avatar:require('../assets/image/defalut.png')" @error="(e)=>{e.target.src = require('../assets/image/defalut.png')}" />
					<h2  @click="onClickPersonal">{{store.state.userInfoX?.nickName}}</h2>
					<div @click="manageClick(store.state.userInfoX&&store.state.userInfoX.user_type)"  class="personal-details-photo-manage" v-if="store.state.userInfoX&&store.state.userInfoX.user_type > 1&&store.state.userInfoX.token">
						<img v-if="store.state.userInfoX&&store.state.userInfoX.token" class="personal-details-photo-manage" :src="store.state.userInfoX&&store.state.userInfoX.user_type==2?require('../assets/image/icon_manage.png'):require('../assets/image/icon_sup_manage.png') " >
						<span v-if="store.state.userInfoX&&store.state.userInfoX.token" :style="{color:store.state.userInfoX&&store.state.userInfoX.user_type==2?'#1d65ff':'#d81e06'}">{{store.state.userInfoX&&store.state.userInfoX.user_type==2?'管理员':'超级管理员'}}</span>
					</div>
					<div @click="manageClick(store.state.userInfoX&&store.state.userInfoX.user_type)"  class="personal-details-photo-manage" v-if="!store.state.userInfoX || store.state.userInfoX&&!store.state.userInfoX.token">
						<img v-if="store.state.userInfoX&&store.state.userInfoX.token" class="personal-details-photo-manage" :src="store.state.userInfoX&&store.state.userInfoX.user_type==2?require('../assets/image/icon_manage.png'):require('../assets/image/icon_sup_manage.png') " >
						<span v-if="store.state.userInfoX&&store.state.userInfoX.token" :style="{color:store.state.userInfoX&&store.state.userInfoX.user_type==2?'#1d65ff':'#d81e06'}">{{store.state.userInfoX&&store.state.userInfoX.user_type==2?'管理员':'超级管理员'}}</span>
						<span v-else>去登录</span>
					</div>
					<el-popover
					    ref="personalRef"
					    :virtual-ref="personalvRef"
					    title=""
					    virtual-triggering
						:width="90"
						v-model="personalvShow"
					  >
					    <a @click="linkClick(index)" v-for="(item,index) in data.personalData" class="personal-center" :href="item.path">
						    <img :src="item.img" />
							{{item.name}}
					    </a>
					  </el-popover>
				  </div>
				  <div class="web-team-header-right" v-if="store.state.userInfoX&&store.state.userInfoX.user_type > 1&&store.state.userInfoX.token">
					  <el-button ref="buttonRef" @click="onClickOutside">管理中心</el-button>
					  <el-popover
					      ref="popoverRef"
					      :virtual-ref="buttonRef"
					      trigger="click"
					      title=""
					      virtual-triggering
						  :width="100"
					    >
					      <a v-for="(item,index) in data.messageData" class="message-center" :href="item.path">
							  <img :src="item.img" />
							{{item.name}}
						  </a>
					    </el-popover>
				  </div>
			  </header>
			  <el-container>
				<el-aside>
					<personalDetails></personalDetails>
				</el-aside>
				<el-main>
					<div class="loading-main"></div>
					<router-view />
					<invite></invite>
					<personLineList></personLineList>
					<div class="gobang-win" v-if="data.winDescride">
						<p>{{data.winDescride}}</p>
						<button @click="winClick">确定</button>
					</div>
				</el-main>
			  </el-container>
		  </el-main>
		</el-container>
	</div>
</template>

<script lang="ts">
	
	import { ref,provide,watch,inject,unref,reactive,onMounted } from 'vue'
	import { useRouter } from 'vue-router'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import personalDetails from './children/personalDetails.vue'
	import personLineList from './children/personLineList.vue'
	import invite from './game/invite.vue'
	import bus from '../public/bus'
	import axios from "axios";
	export default {
		components:{
			personalDetails,
			personLineList,
			invite
		},
		setup(){
			let data = reactive({
				winDescride:'',
				messageData:[{
				name:'人员管理',
				path:'/#/userManage',
				img:require('../assets/image/icon_user.png'),
				selectImg:require('../assets/image/icon_user_hover.png'),
				},{
					name:'文章审核',
					path:'/#/articleReview',
					img:require('../assets/image/icon_review.png'),
					selectImg:require('../assets/image/icon_review_hover.png'),
				},{
					name:'问题管理',
					path:'/#/questionList',
					img:require('../assets/image/icon_question.png'),
					selectImg:require('../assets/image/icon_question.png'),
					menu_name:"设置",
				}],
				personalData:[{
					name:'个人中心',
					path:'/#/set',
					img:require('../assets/image/icon_user.png'),
					selectImg:require('../assets/image/icon_nav_password_hover.png'),
				},{
					name:'消息推送',
					path:'/#/push',
					img:require('../assets/image/icon_nav_news.png'),
					selectImg:require('../assets/image/icon_nav_news_hover.png'),
				},{
					name:'修改密码',
					path:'/#/revise',
					img:require('../assets/image/icon_nav_password.png'),
					selectImg:require('../assets/image/icon_nav_password_hover.png'),
				},{
					name:'退出登录',
					path:'javascript:void(0);',
					img:require('../assets/image/icon_nav_logout.png'),
					selectImg:require('../assets/image/icon_nav_logout_hover.png'),
				}]
			})
			
			const router = useRouter();
			const store = inject('store') as any
			const buttonRef = ref()
			const popoverRef = ref()
			const personalRef = ref()
			const personalvRef = ref()
			
			
			const communityClick = ()=>{
				router.push('/community')
			}
			
			const onClickOutside = () => {
			  unref(popoverRef).popperRef?.delayHide?.()
			}
			const onClickPersonal = () => {
			  unref(personalRef).personalRef?.delayHide?.()
			}
			const manageClick = (type:any)=>{
				if(!store.state.userInfoX || (store.state.userInfoX&&!store.state.userInfoX.token)){
					router.push(`/login`)
					return
				}
				let message = ""
				if(type == 2){
					message = "管理员权限：1.审核文章，删除评论内容，2.修改普通用户账号权限"
				}else{
					message = "超级管理员权限：1.审核文章，删除评论内容，2.修改普通用户，管理员，超级管理员账号权限"
				}
				ElMessage({
				    showClose: true,
				    message:message,
				    type: 'success',
					duration:10000
				  })
			}
			const linkClick = (index:number)=>{
				console.log(index)
				
				if(index == 3){
					ElMessageBox.confirm(
						'你确定要退出吗?',
						'警告',
						{
						  confirmButtonText: '确定',
						  cancelButtonText: '取消',
						  type: 'warning',
						}
					  ).then(() => {
						store.commit("logoutMain",true)
					})
					
				}
				
			}
			const winClick = ()=>{
				data.winDescride = ''
				bus.emit('closeTip')
			}
			onMounted(()=>{
				bus.on('tip',(v:any)=>{
					data.winDescride = v
				})
			})
			return {
				store,
				buttonRef,
				popoverRef,
				onClickOutside,
				communityClick,
				personalRef,
				personalvRef,
				onClickPersonal,
				data,
				linkClick,
				manageClick,
				winClick
			}
		}
		
	}
	
</script>

<style lang="scss">
	.web-team{
		width: 100%;
		height: 100%;
		display: flex;
		background: url(../assets/image/icon_home_bc.jpg) no-repeat;
		background-size: 100% 100%;
		>.el-container{
			
			>.el-main{
				display: flex;
				flex-direction: column;
				padding: 0px;
				.web-team-header{
					width: 100%;
					height: 56px;
					background-color: white;
					box-shadow: 0 3px 10px 0 rgba(0, 0, 0,0.06);
					position: static;
					z-index: 1;
					display: flex;
					justify-content:space-between;
					.web-team-header-left{
						width: auto;
						height: 100%;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						flex-direction: row;
						padding-left: 32px;
						box-sizing: border-box;
						cursor: pointer;
						position: relative;
						h2{
							
							font-size: 15px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							text-align: center;
							color: #222;
							letter-spacing: 1px;
							font-weight: bold;
							margin: 0 10px;
							font-family: cursive;
						}
						.personal-details-photo-manage{
							
							display: flex;
							justify-content: center;
							align-items: center;
							background: #c3c3c3;
							padding: 3px 5px;
							border-radius: 20px;
							img{
								width: 15px;
								height: 15px;
								background:transparent;
								padding: 0;
								margin-right: 3px;
							}
							span{
								font-size: 13px;
								color: #1d65ff;
								
							}
						}
					}
					.web-team-header-right{
						display: flex;
						align-items: center;
						padding-right: 30px;
					}
				}
				
				>.el-container{
					height: calc(100% - 56px);
					.el-aside{
						width: 100PX;
						&:nth-of-type(1){
							background: rgba(0,0,0,0.3);
							overflow: hidden;
							box-shadow: 3px 0px 10px 0 rgb(0 0 0 / 6%);
							z-index: 1;
						}
						
					}
					>.el-main{
						box-sizing: border-box;
						background-color: rgba(255,255,255,0.5);
						padding: 0;
						overflow: hidden;
					}
					.el-main{
						box-sizing: border-box;
						background-color: rgba(255,255,255,0.5);
						padding: 0;
					}
				}
			}
			
		}
		.gobang-win{
			width: 300px;
			height: 200px;
			position: absolute;
			left: 100px;
			top: 30%;
			right: 0;
			margin: auto;
			background-color: white;
			border-radius: 5px;
			text-align: center;
			line-height: 200px;
			font-size: 16px;
			color: #222;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			padding: 0 30px;
			box-shadow: 0 0 10px 0 #aaa;
			z-index: 8;
			p{
				height: 30px;
				line-height: 30px;
			}
			button{
				width: 120px;
				height: 45px;
				background-color: rgb(249, 171, 8);
				text-align: center;
				line-height: 45px;
				font-size: 16px;
				color: white;
				border: 0;
				border-radius: 5px;
				cursor: pointer;
				margin-top: 30px;
			}
			
		}
		
	}
	.el-popover.el-popper{
		min-width: 0;
		padding: 20px 15px;
	}
	.message-center{
		font-size: 14px;
		color: #444;
		text-decoration: none;
		display: block;
		text-align: center;
		margin-bottom: 20px;
		img{
			width: 20px;
			display: inline-block;
			vertical-align: text-bottom;
		}
		&:nth-of-type(4){
			// margin-bottom: 0;
			img{
				width: 25px;
				vertical-align: middle;
			}
			
		}
		&:hover{
			opacity: 0.8;
		}
	}
	.personal-center{
		@extend .message-center;
		&:nth-of-type(4){
			margin-bottom: 0;
		}
	}
</style>
